<!DOCTYPE html>
<html>
<head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.7/angular.js"></script>
</head>
<body ng-app="main" ng-controller="mc">
<div class="container">
<div class="col-md-3">
<button class="btn btn-primary" ng-click="findAllUsers()">获取所有用户</button>
<button class="btn btn-warning" ng-click="addUser()">添加用户</button>

</div>
<div class="col-md-9">

<form class="form-inline">
<input type="text" class="form-control" ng-model="user.name" placeholder="请输入用户名" />

<input type="email" class="form-control" ng-model="user.email" placeholder="请输入用户邮箱" />
<input type="number" class="form-control" ng-model="user.salary" placeholder="请输入薪资" />
</form>

</div>
<div>
</div>
<table class="table table-striped">
	<tr ng-repeat="u in us">
		<td>{{$index}}</td><td>{{u.name}}</td><td>{{u.email}}</td>
		<td>{{u.salary}}</td>
		<td><button class="btn btn-success" ng-click="deleteUser($index)">删除</button></td>
		<td><button class="btn btn-info" ng-click="selectUser($index)" data-toggle="modal" data-target="#myModal">更新</button></td>
	</tr>
</table>
</div>







<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <input ng-model="cu.name"/>
        <input ng-model="cu.email"/>
        <input ng-model="cu.salary"/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" ng-click="updateUser()" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>






<script type="text/javascript">
	var main=angular.module("main",[]);
	main.controller("mc",function($scope,$http){
		$scope.findAllUsers=function(){
			var config={
				method:"get",url:"/user"
			}
			$http(config).then(function(res){
				$scope.us=res.data;
			});
		};

		$scope.addUser=function(){
			var config={
				method:"post",url:"/user",
				headers:{"Content-Type":"application/json"},
				data:$scope.user
			};
			$http(config).then(function(res){
				$scope.us.push(res.data);
			});

		};
		$scope.deleteUser=function(index){
			var u=$scope.us[index];
			var config={
				method:"delete",url:"user/"+u._id,
			};
			$http(config).then(function(res){
				$scope.us.splice(index,1);
			});
		}
		$scope.selectUser=function(index){
			var x=Object.create($scope.us[index]);
			$scope.cu=x;
			$scope.cp=index;
		}
		$scope.updateUser=function(){
			var config={
				method:"put",url:"user/"+$scope.cu._id,
				data:$scope.cu
			};
			$http(config).then(function(res){
				$scope.us[$scope.cp]=res.data;
			})
		}

	});
</script>
</body>
</html>